<template>
  <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:90px' }" :wrapper-col="{ style: 'calc(100% - 90px)' }" autocomplete="off" @finish="onFinish">
    <a-form-item label="费用名称" name="name" :rules="[{ required: true, message: '请填写费用名称' }]">
      <a-input v-model:value="formState.name" :maxlength="10" allowClear placeholder="请填写"></a-input>
    </a-form-item>
    <a-form-item label="费用类型" name="type" :rules="[{ required: false, message: '请选择费用类型!' }]">
      <a-select v-model:value="formState.type" placeholder="费用类型" allowClear>
        <a-select-option v-for="(item, index) in dataDict['QUOTATION_FEE_TYPE']" :key="index" :value="item.code * 1">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <!-- 报关费 -->
    <template v-if="formState.type === 1">
      <a-form-item label="报关方式" name="typeValue" :rules="[{ required: false, message: '请选择报关方式!' }]">
        <a-select v-model:value="formState.typeValue" placeholder="报关方式" allowClear>
          <a-select-option v-for="(item, index) in dataDict['CUSTOMS_DECLARATION_METHOD']" :key="index" :value="item.code">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
    </template>
    <!-- 超出品名费 -->
    <template v-if="formState.type === 2">
      <a-form-item label="基础品名数" name="baseProductSize" :rules="[{ required: false, message: '请填写基础品名数!' }]">
        <a-input-number v-model:value="formState.baseProductSize" :max="999" :precision="0" placeholder="基础品名数" />
      </a-form-item>
      <a-form-item label="每超出" name="exceedSize" :rules="[{ required: false, message: '请填写每超出!' }]">
        <a-input-number v-model:value="formState.exceedSize" :max="999" :precision="0" placeholder="每超出" />
      </a-form-item>
    </template>
    <!-- 预收税金 -->
    <template v-if="formState.type === 3">
      <a-form-item label="交税方式" name="typeValue" :rules="[{ required: false, message: '请选择交税方式!' }]">
        <a-select v-model:value="formState.typeValue" placeholder="交税方式" allowClear>
          <a-select-option v-for="(item, index) in dataDict['TAX_PAYMENT_METHOD']" :key="index" :value="item.code">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
    </template>
    <!-- 材质 -->
    <template v-if="formState.type === 4">
      <a-form-item label="材质" name="typeValue" :rules="[{ required: false, message: '请选择材质!' }]">
        <a-select v-model:value="formState.typeValue" placeholder="材质" allowClear>
          <a-select-option v-for="(item, index) in materialOpts" :key="index" :value="item.id">{{ item.material }}</a-select-option>
        </a-select>
      </a-form-item>
    </template>
    <!-- 内陆费 -->
    <template v-if="formState.type === 5">
      <a-form-item label="省/市/区" name="typeValue" :rules="[{ required: true, message: '请选择省/市/区!' }]">
        <a-cascader
          v-model:value="formState.typeValue"
          :fieldNames="{ label: 'name', value: 'code', children: 'child' }"
          change-on-select
          :options="provincesOpts"
          @change="changeAddressHandle"
          :show-search="{ filter }"
          placeholder="请选择"
        />
      </a-form-item>
    </template>
    <a-form-item label="价格" name="price" :rules="[{ required: true, message: '请填写价格!' }]">
      <a-input-number v-model:value="formState.price" :max="99999.99" :precision="2" placeholder="价格" />
    </a-form-item>

    <template v-if="![2, 3].includes(formState.type)">
      <a-form-item label="单位" name="unit" :rules="[{ required: true, message: '请选择单位!' }]">
        <a-select v-model:value="formState.unit" placeholder="单位" @change="changeUnitHandle">
          <a-select-option v-for="(item, index) in dataDict['UNIT']" :key="index" :value="item.code">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
    </template>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button type="primary" html-type="submit">确定</a-button>
      <a-button @click="cancelHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import CommonHook from "@/hook/commonHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, type, passData } = toRefs(props);
const { dataDict } = CommonHook();
const { formState, formDataRef, materialOpts, getAllMaterialOpts, filter, provincesOpts, getAllProvincesOpts } = InitHook();
const { onFinish, resetFields, cancelHandle, changeUnitHandle, changeAddressHandle } = OperationHook({ formDataRef, formState, type, passData, emit, materialOpts });
const init = () => {
  if (type.value === 2) {
    Object.assign(formState, passData.value);
    if (formState.type === 5) {
      const array = formState.typeValue.split(",");
      formState.typeValue = array.map((t: any) => Number(t));
    }
  }
  getAllProvincesOpts();
  getAllMaterialOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
      formDataRef.value.clearValidate();
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-input-number){
  width: 100%;
}
</style>
